<template>
  <el-row class="demo-autocomplete">
    <el-col :span="6">
      <div class="sub-title">激活即列出输入建议</div>
      <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch"
        placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
    </el-col>
  </el-row>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  setup() {
    const restaurants = ref([])
    const querySearch = (queryString, cb) => {
      debugger;

      var results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
      // 调用callback返回建议列表的数据
      cb(results)
    }
    const createFilter = (queryString) => {
      console.log(queryString);
      return (restaurant) => {
        return (
          restaurant.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        )
      }
    }
    const loadAll = () => {
      return [
        { value: '洗衣机A' },
        { value: '洗衣机B' },
        { value: '洗衣机C' },
        { value: '冰箱A' },
        { value: '冰箱B', },
        { value: '冰箱C' },
        { value: '电视机A' },
        { value: '电视机B' },
        { value: '电视机C' },
        { value: '空调A' },
        { value: '空调B' },
        { value: '空调C' },
      ]
    }

    const handleSelect = (item) => {
      console.log(item)
    }
    onMounted(() => {
      restaurants.value = loadAll()
    })

    return {
      restaurants,
      state1: ref(''),
      state2: ref(''),
      querySearch,
      createFilter,
      loadAll,
      handleSelect,
    }
  }
})
</script>